<template>
	<view class="page">
		<view class="tabNav">
			<view class="tabWrap">
				<view class="navTitle1" v-for="(item,index) in navLists" :key="index"
					:class="isActive1 === index ? 'active1' : '' ">
					<view :class="{'active':isActive === index}" @click="checked(index,item.title)">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y @scrolltolower="getOrderList" :scroll-top="scrollValue" @scroll="scroll">
			<view class="scroll">
				<view class="order-item" v-for="(item,index) in orderList" :key="index">
					<view class="c-name">
						<text>{{item.customerName}}</text>
						<view  class="c-state1"
							:style=" { backgroundColor: getColorByState(item.worksheetStateStr)}">
							{{item.worksheetStateStr}}
						</view>
					</view>
					<view class="c-list">
						<view class="row">
							<text>距离我: {{item.distance?item.distance:0}} km</text>
							<text>下单 : {{item.createTime}}</text>
						</view>
						<view class="row">
							<text>单号 : {{item.worksheetNumber}}</text>
							<text :style="{color: item.worksheetState === 0 ? overtimeColor : overtimeColor1}">到期:
								{{item.expireTime}}</text>
						</view>
					</view>
					<view class="c-detail" ref="imgHeight">
						<view class="detail-left">
							<image :src="item.imgUrl" class="img"></image>
						</view>
						<view class="detail-right">
							<text class="name">{{item.errorCode}}</text>
							<view class="description">{{item.faultDescription}}</view>
						</view>
					</view>
					<view class="c-btn">
						<button class="btn" type="default" @click="navigateToNavigation(item.installLngat)">导航</button>
						<button class="btn" type="default" @click="goToDetail(item.worksheetNumber)">详情</button>
						<button class="btn" v-if="item.worksheetState!='6'" type="default" @click="goToOperate('转派',item.worksheetNumber)">转派</button>
						<button class="btn" v-if="item.worksheetState!='6'" type="default" @click="goToCarry(item.worksheetNumber)">执行</button>
					</view>

				</view>

				<u-loadmore :status="status" />
			</view>
		</scroll-view>

		<view @tap="goTop" class="uni-link uni-center uni-common-mt top">
			<image src="../../static/back-top.png" class="img"></image>
		</view>

	</view>
</template>

<script>
	import * as API from '@/common/api';
	export default {
		name: "pages-myOrder-takeOrder",
		data() {
			return {
				avatar: '/static/phone.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				isActive: 0,
				isActive1: 0,
				navLists: [{
						index: 0,
						title: "全部"
					}, {
						index: 1,
						title: '已接单'
					},
					{
						index: 2,
						title: "已预约"

					}, {
						index: 3,
						title: "检修中"
					}, {
						index: 4,
						title: "报价中"
					}, {
						index: 5,
						title: "维修中"
					}, {
						index: 6,
						title: "已完成"
					},
				],
				scrollValue: 0,
				oldScrollValue: 0,
				status: 'loadmore',
				params: {
					assignUserId: undefined,
					worksheetState: undefined,
					pageNum: 1,
					pageSize: 10,
				},
				orderList: [],
				overtimeColor: '#7ecc00',
				overtimeColor1: '#d2001b'
			}
		},
		created() {
			this.checked(0, '全部')
		},
		methods: {
			sortArray() {
				//对数组做两次filter 合并到新数组
			},
			checked(index, title) {
				this.isActive = index
				this.isActive1 = index
				if (title == "全部") {

					this.params.worksheetState = undefined;
				} else {
					this.params.worksheetState = index;

				}
				this.getInitOrderList();
			},
			getColorByState(stateStr)
			{
				if(stateStr=='新工单')
				{
					return '#66FF66';
				}
				else if(stateStr=='已接单')
				{
					return '#66B2FF';
				}
				else if(stateStr=='已预约')
				{
					return '#FFFF66';
				}
				else if(stateStr=='检修中')
				{
					return '#FFCC66';
				}
				else if(stateStr=='报修中')
				{
					return '#CC99FF';
				}
				else if(stateStr=='维修中')
				{
					return '#FF6666';
				}
				else
				{
					return '#CCCCCC';
				}
				
			},
			goToDetails() {
				uni.navigateTo({
					url: '/pages/orderProgress/orderProgress-appointment/orderProgress-appointment'
				})
			},
			gotoRedeploy() {
				uni.navigateTo({
					url: '/pages/orderProgress/orderProgress-redeploy/orderProgress-redeploy'
				})
			},
			goToDetail(worksheetNumber) {
				uni.navigateTo({
					url: '/pages/myOrder/orderDetail?worksheetNumber=' + worksheetNumber
				})
			},
			goToCarry(worksheetNumber) {
				uni.navigateTo({
					url: '/pages/myOrder/carryOrder?worksheetNumber=' + worksheetNumber
				})
			},
			goToOperate(e, worksheetNumber) {
				uni.navigateTo({
					url: '/pages/myOrder/operate?title=' + e + '&worksheetNumber=' + worksheetNumber
				})
			},
			getInitOrderList(userId) {

				if (userId) {
					this.params.assignUserId = userId;
				}
				this.params.pageNum = 1;
				this.status = 'loadmore';
				this.orderList = [];
				this.getOrderList();
			},
			async getOrderList() {
				if (this.status != 'nomore') {

					this.status = 'loading';
					const res = await API.listWorksheet({
						params: this.params
					});
					res.rows.forEach(row => {
						if(row.imageVideoUrl)
						{
							row.imgUrl = row.imageVideoUrl.split(",")[0];
						}
						
					})
					this.orderList = this.orderList.concat(res.rows);
					this.params.pageNum += 1;
					if (res.total <= this.params.pageNum * this.params.pageSize) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';

					}
				}

			},
			scroll: function(e) {
				this.oldScrollValue = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollValue = this.oldScrollValue
				this.$nextTick(function() {
					this.scrollValue = 0
				});
			},

		},

	}
</script>

<style lang="less" scoped>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100vw;
		.tabNav {
			width: 95%;
			height: 90rpx;
			background-color: #ffffff;
			border-radius: 8px 8px 0px 0px;
			display: flex;
			justify-content: center;
			border-bottom: 2px solid #F7F7FA;
			z-index: 2;

			.tabWrap {
				width: 95%;
				height: 100%;
				display: flex;

				.navTitle1 {
					display: flex;
					justify-content: center;
					width: 14%;
					margin-top: 15px;
					font-size: 13px;
					font-weight: bold;
					color: #000000;


					.active {

						color: #3251EC;
					}

				}

				.active1 {
					border-bottom: 5rpx solid #3251EC;
				}
			}
		}

		.scroll {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			width: 100%;
			height: 69vh;
			gap: 20rpx;
			padding-bottom: 30rpx;

			.order-item {
				height: 220px;
				width: 95%;
				box-sizing: border-box;
				padding: 20rpx;
				margin-top: 1px;
				background-color: #ffffff;
				border-top: 1px solid rgba(255, 255, 255, 1);
				border-left: 1px solid rgba(255, 255, 255, 1);
				box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
				border-radius: 8px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				gap: 10rpx;

				.c-name {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					font-size: 28rpx;
					font-weight: bold;
					display: flex;

					background: #ffffff;

					.c-state1 {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						color: #ffffff;
						font-weight: bold;
						box-sizing: border-box;
						width: 90rpx;
						font-size: 22rpx;
						height: 36rpx;
						border-radius: 5rpx;
					}
				}

				.c-list {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					gap: 15rpx;
					font-size: 22rpx;
					color: #989898;
					width: 100%;
					padding: 5rpx;
					box-sizing: border-box;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

					.row {
						width: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
					}


				}

				.c-detail {

					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-around;
					width: 100%;
					box-sizing: border-box;
					margin-top: 10rpx;
					gap: 20rpx;
					height: 126rpx;

					.detail-left {

						align-items: center;

						.img {
							height: 126rpx;
							width: 180rpx;
							border-radius: 5px;
						}
					}

					.detail-right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: flex-start;

						gap: 10rpx;
						height: 100%;

						.title {
							width: 100%;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: flex-start;

						}

						.description {
							font-size: 26rpx;
							color: #989898;
							margin-left: 2%;
						}
					}
				}

				.c-btn {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					width: 100%;
					gap: 10rpx;

					.btn {
						width: 120rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 10px;
						font-size: 12px;
						font-weight: bold;
						margin: 0;
						padding: 0;


					}

					.btn:nth-of-type(1) {
						color: #4091D7;
						background: rgba(64, 145, 215, 0.06);
						border: 1px solid #4091D7;
					}

					.btn:nth-of-type(2) {
						color: #2E49E8;
						background: rgba(43, 70, 233, 0.08);
						border: 1px solid #2E49E8;
					}

					.btn:nth-of-type(3) {
						color: #ffffff;
						background: #93C145;
						box-shadow: 0px 8px 15px 0px rgba(147, 193, 69, 0.34);
					}
					.btn:nth-of-type(4) {
						color: #ffffff;
						background: #409EFF;
						box-shadow: 0px 8px 15px 0px rgba(64,158,255, 0.34);
					}

					.btn::after {
						border: none;
					}
				}



			}


		}


		.top {
			width: 40px;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FFFFFF;
			box-shadow: 0px 3px 43px 0px rgba(0, 0, 0, 0.34);
			line-height: 40px;
			border-radius: 50%;
			position: fixed;
			z-index: 9;
			right: 30rpx;
			bottom: 150rpx;

			.img {
				width: 30px;
				height: 30px;
			}
		}



	}
</style>